<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变
    </title>
    <style>
        div {
            float: left;
            margin: 30px;
            width: 150px;
            height: 150px;
            border: 2px solid orange;
            font-size: 14px;
            line-height: 1.5;
        }

        .box1 {
            /* 1、颜色结点均匀分布（默认情况下 */
            background: -webkit-radial-gradient(red, yellow, green);
            /* Safari 5.1 - 6.0 */
            background: -o-radial-gradient(red, yellow, green);
            /* Opera 11.6 - 12.0 */
            background: -moz-radial-gradient(red, yellow, green);
            /* Firefox 3.6 - 15 */
            background: radial-gradient(red, yellow, green);
            /* 标准的语法 */
        }

        .box2 {
            /* 2、当然，对于颜色发辐射界限，我们也可以进行设置 */
            background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%);
            background: -o-radial-gradient(red 5%, yellow 15%, green 60%);
            background: -moz-radial-gradient(red 5%, yellow 15%, green 60%);
            background: radial-gradient(red 5%, yellow 15%, green 60%);
        }

        .box3 {
            /* 3、shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。            默认值是 ellipse。*/
            background: -webkit-radial-gradient(circle, red, yellow, green);
            background: -o-radial-gradient(circle, red, yellow, green);
            background: -moz-radial-gradient(circle, red, yellow, green);
            background: radial-gradient(circle, red, yellow, green);
        }

        .box4 {
            /* 4、size 参数定义了渐变的大小。它可以是以下四个值：closest-side farthest-side closest-corner                 farthest-corner，具体的不同大家可以自己尝试，这里只展示一种情况 */
            background: -webkit-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
            background: -o-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
            background: -moz-radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
            background: radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
        }

        .box5 {
            /* 5、当然，也是有重复渐变这种情况*/
            background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
            background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
            background: repeating-radial-gradient(red, yellow 10%, green 15%);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>

</html>